<template>
  <div id="imagePerview">
    <el-dialog :title="fileList[index]?.fileName" :visible.sync="imagePerview" width="30%" :before-close="handleClose">
      <div>
        <el-carousel arrow="always" @change="indexChange" :initial-index="index" :autoplay="false" trigger="click">
          <el-carousel-item v-for="(item, index) in fileList" :key="index">
            <el-image :src="fileExtension(item?.fileUrl)" :preview-src-list="[fileExtension(item?.fileUrl)]"> </el-image>
          </el-carousel-item>
        </el-carousel>
        <div class="btns">
          <el-button type="primary" icon="el-icon-download" @click="dowload">下载</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "imagePerview",
  props: {
    imagePerview: {
      type: Boolean,
    },
    fileList: {
      type: Array,
    },
  },
  data() {
    return {
      index: 0,
      dialogVisible: false,
    };
  },
  methods: {
    dowload() {
      window.open(this.fileList[this.index].fileUrl);
    },
    indexChange(index) {
      this.index = index;
    },
    handleClose() {
      this.$emit("close");
    },
    fileExtension(src) {
      if (!src) {
        return;
      }
      let Extension = src.toLocaleLowerCase();
      if (Extension.lastIndexOf("doc") > -1 || Extension.lastIndexOf("docx") > -1) {
        return require("@/assets/images/Extension/doc.svg");
      } else if (Extension.lastIndexOf("zip") > -1 || Extension.lastIndexOf("7z") > -1 || Extension.lastIndexOf("rar") > -1) {
        return require("@/assets/images/Extension/压缩包.svg");
      } else if (Extension.lastIndexOf("mp4") > -1 || Extension.lastIndexOf("ts") > -1 || Extension.lastIndexOf("mov") > -1 || Extension.lastIndexOf("wmv") > -1) {
        return require("@/assets/images/Extension/视频.svg");
      } else if (Extension.lastIndexOf("pdf") > -1) {
        return require("@/assets/images/Extension/pdf.svg");
      } else if (Extension.lastIndexOf("ppt") > -1 || Extension.lastIndexOf("pptx") > -1) {
        return require("@/assets/images/Extension/ppt.svg");
      } else if (Extension.lastIndexOf("txt") > -1) {
        return require("@/assets/images/Extension/txt.svg");
      } else if (Extension.lastIndexOf("xls") > -1 || Extension.lastIndexOf("xlsx") > -1) {
        return require("@/assets/images/Extension/ppt.svg");
      } else if (Extension.lastIndexOf("png") > -1 || Extension.lastIndexOf("jpg") > -1 || Extension.lastIndexOf("svg") > -1 || Extension.lastIndexOf("gif") > -1 || Extension.lastIndexOf("jpeg") > -1) {
        return src;
      } else {
        return require("@/assets/images/Extension/其他文件.svg");
      }
    },
  },
};
</script>
<style lang="less" scoped>
#imagePerview {
  :deep(.el-dialog__wrapper) {
    .el-dialog__body {
      .btns {
        display: flex;
        justify-content: center;
        margin-top: 8px;
      }
      .el-carousel {
        .el-carousel__item {
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
</style>
